<template>
  <view
    class="clist  x-row borderBottom"
    @click="$emit('detailUrl',li.id)">
    <view class="img "
      @click.prevent.stop="imgshow(li)">
      <image
        class="u-skeleton-circle"
        :src="$api.ProImg(li.id)" mode="widthFix">
      </image>
    </view>
    <view class="x-col">
      <view
        class="pname u-skeleton-fillet">
        <span>{{li.gname}}</span>
      </view>
      <view
        class="stock itxt u-skeleton-fillet"
        v-for="(v,i) in li.details"
        :key="i">
        {{v.label}}：{{v.value}}
      </view>
      <slot name="cell">
      </slot>
    </view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: ['li'],
  name: 'app-product',
  methods: {
    getimg(img) {
      if (img.includes('http')) {
        return img
      } else {
        return this.urlimg + img
      }
    },
    imgshow(item) {
      let arr = null
      if (item.AllPicList && item.AllPicList.length) {
        arr = item.AllPicList.map(x => this.urlimg.substr(0, this.urlimg.length - 1) + x)
      } else {
        arr = [this.$api.ProImg(item.id)]
      }
	      console.log(item.AllPicList)
	    console.log(arr)
      uni.previewImage({
        urls: arr,
        current: arr[0]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.clist {
  padding: 12rpx 10rpx 14rpx 12rpx;
  .img {
    image {
      width: 128rpx;
      margin-right: 24rpx;
    }
  }
  .pname {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
    line-height: 40rpx;
    // height: 60rpx;
    margin-bottom: 10rpx;
  }
  .itxt {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
  }
  .stock {
    margin-bottom: 10rpx;
  }
  .detail {
    .iconfont {
      font-size: 22rpx;
    }
  }
  .js {
    padding-top: 10rpx;
  }
}
</style>